<!-- <style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style> -->

<template>
  <div class="app-container">
    <el-dialog title="今日体温上报" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">

      <el-form ref="form" :model="form" label-width="80px" style="text-align: center;">
        <el-form-item>
          <span>当前健康状况 : </span>
          <el-select v-model="form.status" placeholder="请选择当前健康状况">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="异常" value="异常"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <span>上午9时体温,37℃以下填正常,37℃以上填写实际 : </span>
          <el-input type="text" v-model="form.morning"></el-input>
        </el-form-item>
        <el-form-item label="">
          <span>中午12时分体温,37℃以下填正常,37℃以上填写实际 : </span>
          <el-input type="text" v-model="form.noon"></el-input>
        </el-form-item>
        <el-form-item label="">
          <span>下午4时体温,37℃以下填正常,37℃以上填写实际 : </span>
          <el-input type="text" v-model="form.night"></el-input>
        </el-form-item>
        <el-form-item label="健康码:" class="uploadImg">
          <el-upload class="avatar-uploader" action="http://localhost:8081/upload" :show-file-list="false"
                     :on-success="handleAvatarSuccess" :on-change="onChange" ref="upload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


      </el-form>



      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onsubmitFrom">确 定</el-button>
    </el-dialog>



    <div class="box">
      <div class="box ordersetting">
        <el-card class="box-card">
          <div class="boxMain">

          </div>
          <div style="text-align: center">
            请大家认真填写,抗击疫情,从我做起!每天18点前填报当天健康信息。
          </div>
        </el-card>
        <div class="calendar">
          <!-- 年份 月份 -->
          <div class="month">
            <div class="currentdate">
              <span class="choose-year">{{ currentYear }}年</span>
              <span class="choose-month">{{ currentMonth }}月</span>
            </div>
            <div class="choose">
              <span @click="goCurrentMonth(currentYear, currentMonth)" class="gotoday">今天</span>
              <span @click="pickPre(currentYear, currentMonth)" style="color: blue;">&lt;&lt;</span>
              <span @click="pickNext(currentYear, currentMonth)" style="color: blue;">&gt;&gt;</span>
            </div>
            <div class="clearfix"></div>
          </div>
          <!-- 星期 -->
          <div class="caldate">
            <ul class="weekdays">
              <li>周一</li>
              <li>周二</li>
              <li>周三</li>
              <li>周四</li>
              <li>周五</li>
              <li>周六</li>
              <li>周日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days">
              <!-- v-for循环 每一次循环用<li>标签创建一天 -->
              <li v-for="dayobject in days">
                <template>
                  <!-- 非当前月份 -->
                  <div class="other-month" v-if="dayobject.day.getMonth() + 1 != currentMonth">
                    {{ dayobject.day.getDate() }}
                  </div>
                  <!-- 当前月 -->
                  <div class="everyday" v-if="dayobject.day.getMonth() + 1 == currentMonth">
                    <span class="datenumber">{{ dayobject.day.getDate() }}</span>

                    <template>
                      <template v-for="obj in leftobj">
                        <template v-if="obj.date == dayobject.day.getDate()">
                          <template v-if="obj.flag">
                            <div class="usual">
                              <p>已上报体温</p>
                            </div>
                          </template>
                          <template v-else>
                            <div class="fulled">
                              <p>体温未上报</p>
                            </div>
                          </template>
                        </template>
                      </template>
                      <button v-if="dayobject.day <= today" @click="handleOrderSet(dayobject.day)"
                              class="orderbtn">体温上报</button>
                    </template>

                  </div>
                </template>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    // eslint-disable-next-line no-unused-vars
    import { dateFormat } from '../utils/dateUtil'
    export default {

        name: "temperature",
        data() {
            return {
                // eslint-disable-next-line no-undef
                imageUrl: '',
                dialogImageUrl: '',
                dialogVisible: false,
                dialogVisible2: false,
                disabled: false,
                form: {
                    day: '',
                    url: ''
                },
                value: new Date(),
                today: new Date(),//当前日期
                currentDay: 1,
                currentMonth: 1,
                LocalMonth: 1,
                currentYear: 2023,
                currentWeek: 1,
                days: [],
                leftobj: [

                ]//用于装载页面显示的月份已经进行预约设置的数据



            }
        },
        created: function () {//在vue初始化时调用
            this.goCurrentMonth()
            // this.initData(null);
            this.createdData();
        },
        methods: {
            createdData() {
                console.log("this.currentYear = " + this.currentYear)
                request({
                    url: "/getAllIsTemperature?date=" + this.currentYear + "-" + this.currentMonth,
                    method: "get",
                }).then((res) => {
                    this.leftobj = res.data.object
                })
            },

            test() {
                this.createdData();
            },


            onsubmitFrom() {
                request({
                    url: "/addTemperature",
                    method: "post",
                    data: this.form
                }).then((res) => {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.dialogVisible = false;
                    this.test();
                });
            },
            onChange(file) {
                if (file) {
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if (!size) {
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },
            handleRemove(file) {
                console.log(file);
                this.dialogImageUrl = null
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible2 = true;
                console.log("add")
            },
            handleDownload(file) {
                console.log(file);
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(this.imageUrl)
                this.form.url = res.object
                console.log(res.object)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //点击报体温
            handleOrderSet(day) {
                this.dialogVisible = true;
                this.form.day = dateFormat(day, 'yyyy-MM-dd hh:mm:ss')
                var today = dateFormat(day, 'yyyy-MM-dd hh:mm:ss');
                console.log(day)
                request({
                    url: "/getTemperature/" + today,
                    method: "get",
                }).then((res) => {
                    if (res.data.stateCode == 200) {
                        this.form = res.data.object
                        this.imageUrl = ''
                        this.imageUrl = `http://localhost:8081/download?name=` + res.data.object.url
                    } else {
                        this.form = {};
                        this.form.day = today;
                        this.imageUrl = ''
                    }

                });
            },

            //初始化当前页要展示的日期
            initData: function (cur) {
                var date;
                var index = 0;   //控制显示预定的天数
                if (cur) {
                    date = new Date(cur);
                    console.log("1date = " + date)
                } else {
                    var now = new Date();
                    console.log("now = " + now)
                    var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                    d.setDate(35);
                    console.log("d= " + d)
                    console.log(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
                    date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    console.log("2date = " + date)
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                console.log(this.currentYear)
                this.currentMonth = date.getMonth() + 1;
                this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
                var today = new Date();
                this.LocalMonth = today.getMonth() + 1;
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                this.days.length = 0;
                // 今天是周日，放在第一行第7个位置，前面6个
                //初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayobject = {};
                    dayobject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayobject.index = index++;//从今天开始显示供预定的数量
                    }
                    else if (index != 0 && index < 3)
                        dayobject.index = index++;//从今天开始3天内显示供预定的数量
                    this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                }
                //其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject = {};//dayobject   {day:date,index:2}
                    dayobject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayobject.index = index++;
                    }
                    else if (index != 0 && index < 3)
                        dayobject.index = index++;
                    this.days.push(dayobject);
                }


                // this.leftobj = [
                //     { date: 1, number: 120, reservations: 1 },
                //     { date: 3, number: 120, reservations: 1 },
                //     { date: 4, number: 120, reservations: 120 },
                //     { date: 6, number: 120, reservations: 1 },
                //     { date: 8, number: 120, reservations: 1 }
                // ];
            },
            //切换到当前月份
            goCurrentMonth: function (year, month) {
                var d = new Date();
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                this.createdData();
            },
            //向前一个月
            pickPre: function (year, month) {
                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                this.createdData();
            },
            //向后一个月
            pickNext: function (year, month) {
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(35);////获取指定天之后的日期
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                this.createdData();
            },
            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function (year, month, day) {
                var y = year;
                var m = month;
                if (m < 10) m = "0" + m;
                var d = day;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            }
        }
    }
</script>

<style scoped>
  .ordersetting .el-input__inner {
    height: 36px;
    line-height: 36px;
  }

  .ordersetting {
    background: #f5f5f5;
    box-shadow: none;
    border-top: none;
  }

  .gotoday {
    border: 1px solid #d5d9df
  }

  .calendar p {
    margin: 0;
  }

  .filebtn {
    padding: 9px 20px;
    border: none;
    font-size: 18px;
    background: #0ebffc;
  }

  .month {
    width: 100%;
    line-height: 3;
    /* background: #00B8EC; */
  }

  .month ul {
    margin: 0;
    padding: 0;
    display: flex;
  }

  .year-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  .year-month:hover {
    background: rgba(150, 2, 12, 0.1);
  }

  .choose-year {
    padding-left: 20px;
    font-size: 1.2rem;
  }

  .choose-month {
    text-align: center;
    font-size: 1.2rem;
  }

  .arrow {
    padding: 30px;
  }

  .arrow:hover {
    background: rgba(100, 2, 12, 0.1);
  }

  .month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }

  .caldate {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .weekdays {
    margin: 0;
    padding: 0;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    color: #333;
    justify-content: space-around;
    border-bottom: 1px solid #ededed;
    border-top: 2px solid #0ebffc;
  }

  .weekdays li {
    display: inline-block;
    width: 14%;
    text-align: center;
    padding: 10px 0;
    border-right: 1px solid #f1efef;
    color: #000;
    font-size: 20px;

  }

  .days {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

  }

  .days li {
    height: 160px;
    list-style-type: none;
    display: inline-block;
    width: 14%;
    text-align: right;
    font-size: 1rem;
    color: #000;
    list-style-type: none;
    display: inline-block;
    width: 14.2%;
    font-size: 1rem;
    color: #000;
    border-bottom: 1px solid #fff;
  }

  .everyday {
    height: 160px;
    border-bottom: 1px solid #f1efefef;
    position: relative;
    background: #fff;
  }

  .everyday .datenumber {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .everyday .usual {
    height: 100%;
    background: #1ed7fc;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
    line-height: 1.5;
  }

  .everyday .fulled {
    height: 100%;
    background: #ff9c9d;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
  }

  .everyday .nochoose {
    height: 100%;
    background: #effbff;
  }

  .everyday .orderbtn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    border: none;
    background: #d6ffff;
    padding: 3px 10px;
    color: #0ebffc;
    border-radius: 4px;
    font-size: 16px;
  }

  .days li .active {
    padding: 6px 10px;
    border-radius: 50%;
    background: #00B8EC;
    color: #fff;
  }

  .days li .other-month {
    padding: 10px;
    height: 140px;
    color: gainsboro;
    background: #f9f9f9;
  }

  /* .singlebtn {
          font-size: 18px;
      }
      .mutiplebtn {
          font-size: 18px;
      } */



  .filebox {
    position: relative;
  }

  .el-card__body {
    position: relative;
  }

  .el-upload--text {
    position: absolute;
    left: 22%;
    top: 14px;
  }

  .el-upload--text .el-button {
    background: #0ebffc;
    border: none
  }

  .el-upload-list {
    width: 20%;
  }

  .filebtns {
    position: relative
  }

  .multifile {
    width: 100%;
  }

  .mutibtn {
    position: absolute;
    left: 12%;
    top: 0;
  }

  .uploadfile {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    border: 1px solid #999;
    text-decoration: none;
    color: #666;
  }

  .change {
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    opacity: 0;
  }

  .singleuploaded {}

  .mutiuploaded {
    left: 31.5%;
  }

  .outputloaded {
    left: 43%;
  }

  .inputfile-text {
    height: 33px;
    width: 233px;
    display: inline-block;
    border: 1px solid #ccc;
    line-height: 36px;
    border-radius: 7px;
    cursor: pointer;
  }

  .inputfile-text span {
    padding-left: 11px;
    color: #aba7a7;
  }

  .days li .current-month .full {
    background: #ff8a8a;
    text-align: center;
    line-height: 100px;
    color: #fff;

  }

  .days li .current-month .full .full-text {
    font-size: 26px;
  }

  .clearfix {
    clear: both
  }

  .month .currentdate {
    float: left
  }

  .month .choose {
    float: right;
    line-height: 57px;
    padding-right: 30px;
    color: #676767
  }

  .month .choose span {
    background: #fff;
    padding: 5px 10px;
    cursor: pointer;
  }

  /* upload */
  .file {
    display: flex;
    width: 60px;
    height: 33px;
    overflow: hidden;
    border: 1px solid #ccc;
    width: 20%;
    margin-top: -4px;
    border-radius: 7px;
    position: relative;
  }

  .file .defaulttext {
    position: absolute;
    top: 5px;
    left: 10px;
    color: #bdbdbd;
  }

  .file input {
    width: 100%;
    height: 40px;
    position: relative;
    top: -10px;
    font-size: 0;
    opacity: 0;
    cursor: pointer;
  }

  .el-card__body #span {
    font-size: 14px;
    padding-left: 20px;
    color: #555;
    margin-top: 10px;
    display: block;
    width: 20%;
  }

  html,
  body {
    /* overflow-y: scroll; */
    margin: 0;
  }

  a {
    color: #3c8dbc;
    text-decoration: none;
  }

  /* new style */
  .skin-purple .main-sidebar {
    background: #fff;
  }

  .skin-purple .main-header .logo:hover {
    background: #0abdfe;
  }

  .skin-purple .main-header .navbar .sidebar-toggle:hover {
    /* background: #0abdfe; */
  }

  .skin-purple .main-header {
    min-height: 70px;
    padding: 0;
  }

  .skin-purple .main-header .logo {
    height: 50px;
    /* background: #0abdfe; */
    float: left;
    padding: 20px 0 0 15px;
    /* width: 230px; */
  }

  .skin-purple .main-header .navbar {
    height: 70px;
    background: linear-gradient(to right, #0abdfe, #67f0e0);
    /* margin-left: 230px; */
  }

  .winfo {
    margin-left: 230px;
  }

  .skin-purple .main-header .sidebar-toggle {
    display: inline-block;
    padding: 24px 15px;
    color: #fff;
  }

  .skin-purple .main-sidebar {
    padding-top: 75px;
  }

  .sidebar-menu>li {
    line-height: 1.8
  }

  .skin-purple .sidebar-menu>li>a {
    font-size: 16px;
    color: #666
  }

  .skin-purple .sidebar-menu>li:hover>a,
  .skin-purple .sidebar-menu>li.active>a {
    background: transparent;
    color: #666;
    border-left-color: transparent
  }

  .skin-purple .treeview-menu>li>a:hover {
    color: #fff
  }

  .skin-purple .sidebar-menu>li>.treeview-menu {
    background: #fff;
  }

  .sidebar-menu .treeview-menu>li>a {
    font-size: 16px;
    padding-left: 35px;
    color: #999
  }

  .sidebar-menu .treeview-menu>li:hover {
    background: #0abdfe;
  }

  @media (min-width: 768px) {
    .skin-purple .navbar-nav>li>a {
      padding-top: 25px;
      padding-bottom: 25px;
    }
  }

  .modal-body .nav-tabs>li.active>a,
  .nav-tabs>li.active>a:focus,
  .nav-tabs>li.active>a:hover {
    color: #0abdfe
  }

  .modal-body .nav-tabs>li>a {
    color: #555
  }

  .bg-olive {
    background-color: #0abdfe !important;
  }

  .dataTable .btn[class*='bg-']:hover {
    box-shadow: none
  }

  .btn-primary {
    background: #0abdfe;
    border-color: #0abdfe;
  }

  .box-body .nav>li>a {
    color: #666
  }

  .box-body .nav>li.active>a {
    color: #0abdfe;
  }


  /* tab 1*/
  .double {
    line-height: 58px;
  }

  .title .glyphicon {
    padding: 3px;
    font-size: 13px;
    border-radius: 8px;
    color: #fff;

  }

  .data span.arrowup {
    color: #d88918;
  }

  .data span.arrowdown {
    color: #6bb10a;
  }

  .item-blue .glyphicon {
    background-color: #39a9ea;
  }

  .item-green {
    line-height: 58px;
  }

  .item-green .glyphicon {
    background-color: #6bb10a;
    line-height: 12px;
  }

  .item-orange .glyphicon {
    background-color: #d88918;
  }

  .item-red .glyphicon {
    background-color: #f14f4f;
  }

  .chart .chart-box {
    margin: 10px;
  }

  /* 数据表格label */
  .content-wrapper .data-type {
    /*width: 90%;*/
    margin: 10px 5px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
  }

  .data-type .title,
  .data-type .data {
    padding: 3px 12px;
    border-top: 1px solid #d4d4d4;
    overflow: hidden;
    height: 42px;
  }

  .data-type .title {
    line-height: 34px;
    border-right: 1px solid #d4d4d4;
  }

  .data-type .data:last-child {
    border-right: 0;
  }

  .data-type .title {
    text-align: center;
    background: #ececec;
  }

  .data-type .data .line {
    vertical-align: middle;
    overflow: hidden;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  /* label行高度 */
  .data-type .data>label {
    line-height: 36px;
  }

  .data-type .data>.form-group {
    line-height: 36px;
  }

  .data-type .data.text {
    line-height: 36px;
  }

  /* label行分隔符 */
  .data-type .data.border-right {
    border-right: 1px solid #d4d4d4;
  }

  /* 表格双倍高度 */
  .data-type .title.rowHeight2x,
  .data-type .data.rowHeight2x {
    height: 84px;
  }

  .data-type .title.rowHeight2x,
  .data-type .data.rowHeight2x.text {
    line-height: 78px;
  }

  /*.data-type .data.rowHeight2x > label {
          line-height:78px;
      }*/
  .data-type .title.editer,
  .data-type .data.editer {
    height: 320px;
  }

  .data-type .title.editer {
    line-height: 300px;
  }

  /*清除parding*/
  .padding-clear {
    padding-right: 0px;
    padding-left: 0px;
  }

  /* 文件上传 */
  /*a  upload */
  .a-upload {
    padding: 4px 10px;
    height: 35px;
    line-height: 25px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
  }

  .a-upload input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
  }

  .a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
  }

  /* 医疗 */
  .search-box {
    display: inline-block
  }

  .input-sm {
    height: 32px;
  }

  .btn-create {
    margin-left: 10px;
    background-color: #0abdfe;
    border-color: #0abdfe;
    color: #fff;
  }

  .btn-create:hover,
  .btn-create:active,
  .btn-create:focus {
    color: #fff;
  }

  .pagination {
    margin: 0
  }

  .medical-modal {
    position: absolute;
    top: 0%;
    left: 0%;
    display: none;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999
  }

  .medical-modal .content {
    position: absolute;
    left: 35%;
    top: 25%;
    border-radius: 8px;
    width: 30%;
    height: 40%;
    background-color: #fff;
  }

  .pageitems,
  .jump {
    margin-left: 15px;
    display: inline-block;
  }

  .jumppage {
    width: 30px;
    text-align: center
  }

  @media (min-width: 768px) {
    .subscribe .modal-dialog {
      width: 900px;
      margin: 30px auto;
    }
  }

  .checklist {
    margin-top: 10px;
  }

  .checklist .input-group {
    margin-bottom: 10px;
  }

  .modal-page {
    margin-top: 20px;
    font-size: 12px;
  }

  .modal-page .form-control {
    font-size: 12px;
    padding: 0;
    height: 26px;
  }

  .table-check {
    margin: 0;
    display: inline-block;
    margin-right: 4px;
  }

  .daterange {
    margin: 10px 10px 0;
  }

  .daterange .input-group .form-control {
    width: 20%;
  }

  .chart-title {
    font-size: 16px;
    font-weight: normal;
    text-align: center;
  }

  .diaocha {
    line-height: 2
  }

  .diaocha h5 {
    color: #f98d45;
    background: #f5f7f9;
    line-height: 2;
    padding-left: 15px;
  }

  .diaocha div {
    padding: 0 20px;
    border-bottom: 1px solid #dce1e7;
  }

  .diaocha div h5 {
    color: #555;
    background: transparent;
    padding-left: 0;
  }

  .diaocha label {
    font-weight: normal;
  }

  .diaocha .form-group {
    margin-left: 0;
    margin-right: 0;
  }

  .diaocha .options label {
    margin-right: 10px;
  }

  .tizhi button {
    margin-right: 15px;
  }

  .innerform {
    margin-top: 20px;
  }

  .fa-search {
    cursor: pointer
  }

  .line {
    margin-top: 10px;
  }

  input[type=radio]:focus {
    outline: none
  }

  input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none
  }

  label input[type="radio"] {
    content: "\a0";
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    width: 15px;
    height: 15px;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #c7c6c6;
    line-height: 1;
    margin-top: -1px;
  }

  label input[type="radio"]:checked {
    border: 3px solid #0abdfe;
  }

  .right-menu {
    float: right;
    padding: 18px 30px 0 0;
    color: #fff;
  }

  .el-dropdown {
    color: #fff;
  }

  .avatar-wrapper img {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    vertical-align: middle
  }

  .el-popper[x-placement^=bottom] {
    margin-top: 30px;
  }

  .el-dropdown-menu__item--divided {
    margin: 0;
    border: 0 none;
    border-bottom: 1px solid #ebeef5
  }

  .help {
    padding: 0 10px;
  }

  .help .fa {
    margin-right: 5px;
  }

  .el-main {
    background: #ecf0f5;
  }

  .el-menu {
    border: 0 none;
  }

  .main {
    height: 100vh;
    min-width: 800px;
    min-height: 600px;
    overflow: hidden;
  }

  .main aside {
    overflow: visible;
    height: 100%;
  }

  .main aside.isClossTab {
    width: 100%;
    height: 60px;
    cursor: pointer;
    font-size: 25px;
    text-align: center;
    line-height: 60px;
    font-weight: bold;
    border-right: 1px solid #807c7c;
    box-sizing: border-box;
  }

  .main aside .menu {
    width: 100%;
    border-right: 0;
  }

  .el-menu .fa {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
  }

  .el-menu-item a {
    color: #303133
  }

  .el-menu-item:hover,
  .el-menu-item.is-active {
    color: #fff;
    background: #0abdfe;
  }

  .el-menu-item:hover a,
  .el-menu-item.is-active a {
    color: #fff;
  }

  .el-submenu__title:hover {
    background: none;
  }

  .main-footer {
    background: #fff;
    padding: 15px 0;
    color: #444;
  }

  /* title */
  .content-header {
    position: relative;
    padding: 15px 15px 0 15px;
    /* margin-top: 70px; */
  }

  .content-header>h1 {
    margin: 0;
    font-size: 24px;
    font-weight: normal;
  }

  .content-header>h1>small {
    font-size: 15px;
    display: inline-block;
    padding-left: 4px;
    font-weight: 300;
  }

  .content-header>.breadcrumb {
    float: right;
    background: transparent;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    padding: 7px 5px;
    position: absolute;
    top: 20px;
    right: 10px;
    border-radius: 2px;
  }

  /*  */
  .app-container {
    background: #fff;
    /* margin: 15px 30px 15px 15px; */

  }

  .pagiantion {
    text-align: right;
    padding: 15px;
  }

  .box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #3c8dbc;
    /* padding: 10px; */
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  .filter-container {
    padding: 10px 0 15px 0;
  }

  .main-container {
    margin-top: 70px;
  }

  .filter-container .el-button,
  .filter-container .el-input__inner {
    padding: 0 15px;
    height: 34px;
    line-height: 34px;
  }

  .el-aside {
    overflow: hidden;
  }

  .el-submenu .el-menu-item a {
    display: block;
    height: 50px;
  }

  .el-menu--collapse .el-submenu__icon-arrow {
    display: none
  }

  /* .el-container{position: relative;} */
  /* foot */
  .el-footer {
    position: absolute;
    left: 180px;
    right: 0px;
    bottom: -80px;
  }

  .boxMain .el-upload--text {
    position: static;
  }

  .boxMain>div {
    display: inline-block;
  }

  .excelTitle {
    text-align: center;
    overflow: hidden;
    line-height: 40px;
  }

  .excelTitle .el-button {
    float: left;
  }

  .excelTime {
    padding: 10px 0;
    text-align: right;
  }

  .exceTable {
    width: 100%;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    font-size: 14px;
    color: #333;
  }

  .exceTable tr,
  .exceTable td {
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
  }

  .exceTable .headBody {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
  }

  .tabletrBg {
    background: #fcfcfc;
    text-align: right;
  }

  .textCenter {
    text-align: center
  }

  .checkScrol {
    height: 277px;
    overflow-y: scroll;
  ;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
